PUBLICIDADE
Este código tem nota
9,33

Autor

everton3x

Everton da Rosa

membro deste janeiro de 2007

Compartilhe e guarde

  • Rec6
  • StumbleUpon
  • ueba
  • linkk
  • dihitt
  • linkloko
  • linkto
  • Technorati
  • Simpy
  • del.icio.us
  • Faves: Fave It!

PUBLICIDADE

Enquete

Com que frequência você acessa o CódigoFonte.com.br?

Menu expansivo (wdwmenu) em JavaScript


Este menu se comporta da seguinte maneira:
Ao carregar a página, aparece no canto superior esquerdo uma pequena imagem que, quando clicada, faz surgir um menu no formato de barra horizontal. Quando se clica na imagem novamente ele retorna à posição original, escondido.

Instruções:
Mantenha os arquivos sempre na mesma pasta da página que irá utilizar o menu, tanto as imagens quanto o arquivo de scripts (scriptMenu.js).
Para usar o menu, chame a função drawMenu(). O modo mais prático é colocar no evento onLoad da tag BODY, como na página de exemplo.
Os parâmetros da função drawMenu() são:
showMenu.png: é a imagem que aparece quando o menu é exibido. Você pode trocar.
hideMenu.png: é a imagem mostrada quando o menu está escondido. Também pode ser trocada.
Programas: é o texto que aparece quando você coloca o mouse em cima da imagem. Pode ser trocado.
Programas|Configurações|Fechar sessão: são as opções do menu. No exemplo é apenas texo, mas pode ser qualquer coisa, imagens, links, botões, imagens e links, etc.
  • Visualizar demonstração do código
// JavaScript Document
function clickMenu(hideMenu,showMenu){
	var menu=document.getElementById('hideMenu');
	var img=document.getElementById('imgMenu');
	if(menu.style.visibility=='visible'){
		menu.style.visibility='hidden';
		menu.style.display='none';
		img.src=showMenu;
	}else{
		menu.style.visibility='visible';
		menu.style.display='inline';
		img.src=hideMenu;
	}
}

function drawMenu(showMenu,hideMenu,labelMenu,optionMenu){
	var styleMenu='<style type="text/css">#hideMenu {display: none;visibility: hidden;border: thin solid #FF0000;}#showMenu {display: inline;visibility: visible;}#mainMenu {position: relative; z-index: 9999; left: 1px; top: 1px; vertical-align: middle;}</style>';
	document.body.innerHTML+=styleMenu;
	
	var Menu='<div id="mainMenu"><div id="hideMenu">'+optionMenu+'</div><div id="showMenu"><img src="'+showMenu+'" name="'+labelMenu+'" width="20" height="20" hspace="0" vspace="0" border="0" align="absmiddle" id="imgMenu" onClick="clickMenu(\''+hideMenu+'\',\''+showMenu+'\')"></div></div>';
	var newBody;
	var Body=document.body.innerHTML;
	newBody=Menu+Body;
	document.body.innerHTML=newBody;
}

ArquivoTipoTamanhoHits 
wdwMenu.zipArquivo ZIP75,7 Kb12230Baixar o Arquivo
Sim   Não   Este código foi útil para você?
NotaComentário
10
germo comentou em 2/8/2009

nota 100000

nota 100000 nunca já vi mais esse e melhor
9
victords comentou em 12/6/2009

Bom

gostei do menu em javascript
9
ulisses comentou em 30/6/2007

Bom

cara esse codigo esta muito bom javascript é muito bom ainda mais menus.
Regras:
Os comentários seguem as seguintes regras:
  • Todos os comentários são enviados por membros cadastrados no site.
  • A pontuação de comentários de conteúdo do próprio membro não serão computados.
  • Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
  • Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
  • O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
  • Há um limite de 10 comentários por dia para cada membro.
  • Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

     (ainda não tem cadastro? clique aqui!)


Máximo de 30 caracteres

Máximo de 255 caracteres
 

R&W Consulting - Soluções Web Hospedagem UOL HOST PagSeguro - solução para pagamentos online
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.